// composables/useMenuCollapsed.ts
import { computed, ref } from "vue";

// 存储菜单状态到 localStorage
const MENU_COLLAPSED_KEY = "menu_collapsed";

export function useMenuCollapsed() {
    // 从 localStorage 获取初始状态，如果没有则默认为 false
    const initialCollapsed = () => {
        const saved = localStorage.getItem(MENU_COLLAPSED_KEY);
        return saved ? JSON.parse(saved) : false;
    };

    const menuCollapsed = ref<boolean>(initialCollapsed());

    // 切换菜单状态
    const toggleCollapsed = () => {
        menuCollapsed.value = !menuCollapsed.value;
        // 保存到 localStorage
        localStorage.setItem(MENU_COLLAPSED_KEY, JSON.stringify(menuCollapsed.value));
    };

    // 设置菜单状态
    const setCollapsed = (collapsed: boolean) => {
        menuCollapsed.value = collapsed;
        localStorage.setItem(MENU_COLLAPSED_KEY, JSON.stringify(collapsed));
    };

    // 重置为默认状态
    const resetCollapsed = () => {
        setCollapsed(false);
    };

    return {
        menuCollapsed: computed(() => menuCollapsed.value),
        toggleCollapsed,
        setCollapsed,
        resetCollapsed
    };
}
